Interactive Data Visualization for Global Health

Lecture 1: Introduction

Description of course:

This course is designed to introduce students to the theory and practice of interactive data visualization for global health. It will provide an overview of the breadth and history of statistical graphics and data visualization, as well as an introduction to user interface and web design and development.

The course will include substantial hands-on experience building interactive data visualizations through a project-based approach. It will also touch on the cognitive psychological theories of what works and what does not in statistical graphic communication, and how empirical methods can investigate these claims. IDV4GH will give students a broad exposure to the technologies, implementations, and cultures of interactive data visualizations in global health.

Course structure will follow a mixed lesson/lab format, with at least 25% of each day devoted to hands-on IDV experience by students.

Outline for course:

theory,
projects,
tools,
meta-tools.

(5 min)

this is a theory-based course, and we need to know something about the human eye and human mind. We will use psychological theories of cognition and results from experimental psychology, as well as deductive theories of graphics advanced over the last fifty years. Example: Bertin stages of graphic information processing; Critique: discovery and communication are a continuum, not a dichotomy.

this is a project-based class. To do is to understand. You will copy to masters, replicating great interactive data visualizations, as well as develop one of your own. This will require you to program. How many have programmed a computer before? Don’t worry, I’ll teach you. you can do this. quote from generative art book, being an artist is easy, being a craftsman is hard, if your craft is computer-based generative art you’ve got things a lot easier than if your craft is pottery or glass blowing.

there will be elements of software carpentry, this will give you some of the tricks of the trade for doing computer projects. Drawing is also a skill we will build, and there will be a sketching component to every class. Pen and paper is the fastest way to prototype, communicate, collaborate, and try things out. Fortunately, anyone can learn to draw well enough to get by.

Exercises

Homework

Project

Reading

Interactive Data Visualization for the Web

Course Learning Objectives:

At the end of this course, students will be able to:

Make their own interactive data visualizations for global health metrics with D3,
Critique visualizations created by themselves and others,
Design novel data visualizations for new or existing health metrics data,
Evaluate the effectiveness of interactive data visualizations.

Grades:

class participation (10%),
homework (35%),
final project (55%).

Outline for the class:

introductory exercise,
reasons for IDV,
evaluating IDV,
many examples,
sketching exercise,
hands-on IDV exercise.

What is interactive data visualization?

Related domains:

information visualization,
data visualization,
infographics,
statistical graphics,
visual display of quantitative information.

An aside:

When I looked up "information design" in Wikipedia, the example was:

In [21]:

Image(filename='images/DALY_disability_affected_life_year_infographic.png')

Out[21]:

Why do interactive data visualization?

Some goals in statistical graphics, historically:

William Playfair: memorable

In [37]:

Image(filename='images/Playfair_TimeSeries-1.png')

Out[37]:

In [29]:

Image(filename="images/Playfair_breviary_memorable_1.png")

Out[29]:

In [30]:

Image(filename="images/Playfair_breviary_memorable_2.png")

Out[30]:

Otto Neurath: educational

In [31]:

Image(filename="images/T1_N112_A6_Isotype-Neurath.jpg")

Out[31]:

John Tukey: discovery

In [35]:

Image(filename="images/playfair_differenz_cleveland.png")

Out[35]:

In [35]:

Image(filename='/home/j/Project/Models/IDV4GH/lectures/images/Playfair_TimeSeries-1.png')

Out[35]:

Stephen Kosslyn: convince

In [39]:

Image(filename="images/kosslyn_figure_1_6.png")

Out[39]:

Another way to look at things:

(from Prof. Rafael Lozano)

In [7]:

Image(url="https://si0.twimg.com/profile_images/2920160579/977eb073311d7ab6b92bfb7a8e6dd2d3.jpeg", embed=True)

Out[7]:

In [41]:

Image(url="http://upload.wikimedia.org/wikipedia/commons/f/f6/Ocean_pool_Porto_Moniz_Madeira.JPG",
      embed=True)

Out[41]:

In [43]:

Image(url="http://farm3.staticflickr.com/2203/2164621076_bc5ae46785_z.jpg", embed=True)

Out[43]:

In [2]:

Image(url="http://upload.wikimedia.org/wikipedia/commons/thumb/4/49/SydneyRockPool.jpg/1024px-SydneyRockPool.jpg", embed=True)

Out[2]:

In [3]:

Image(url="http://farm4.staticflickr.com/3485/3928970774_092da29ed1_o.jpg", embed=True)

Out[3]:

Edward Tufte's selection: best graphic ever?

In [4]:

# Images from http://www.excelcharts.com/blog/minard-tufte-kosslyn-godin-napoleon/
Image(url="http://3.bp.blogspot.com/_AYITBbUkIRQ/S_r2t_276AI/AAAAAAAAALc/GbQfEXOEZ6I/s1600/Minard.png", embed=True)

Out[4]:

In [5]:

Image(url="http://charts4.excelcharts.com/blog/wp-content/uploads/2008/01/napoleon-thumb1.png", embed=True)

Out[5]:

3 great interactive data visualizations

Great IDV 1: baby name wizard

In [9]:

Image(filename="/home/j/Project/Models/IDV4GH/lectures/images/NameVoyager.png", embed=True)

Out[9]:

http://www.babynamewizard.com/voyager

Critique Time

Conceptual (What are its goals and does it accomplish them?)
Aesthetic (Overall appeal, objects, iconography, contrast, value, size, positioning, hierarchy, consistency, ...)
Technical

(based on I like pretty graphs, U Wisc Design Lab)

Great IDV 2: GBD tree maps

In [28]:

Image("lectures/images/gbd_compare.png", embed=True)

Out[28]:

http://viz.healthmetricsandevaluation.org/gbd-compare/

Great IDV 3: Hans Rosling Ted Talk/Gap Minder

http://www.gapminder.org/

Overview of the theory of statistical graphics and data visualization

Garret Birkhoff (Aesthetic measure)
Edward Tufte (Visual display of quantitative information)
William Cleveland (The Elements of Graphing Data)
Stephen Koslynn (Understanding Charts and Graphs)

In [18]:

Image(filename="/home/j/Project/Models/IDV4GH/lectures/images/X.png", embed=True)

Out[18]: